<form id="applicantForm" name="applicantForm"
      METHOD="POST" ACTION="<?= $_SERVER['PHP_SELF']; ?>"  
      onsubmit="return UTSDK.VALIDATION.validate('applicantForm')">
    <input type="hidden" name="formSource" value="cApplicant"/>
    <input type="hidden" name="action" value="none"/>
    <table>
        <tr>
            <td><label>Events: </label></td>
            <td>
                <select id="applicantEvent" name="applicantEvent"
                        data-validation="select" data-validationmessage="Event must be chosen"
                        data-required="true" data-default="null">
                    <option value="null">Pick Event</option>
                </select>
            </td>
            <td><label id="applicantEventError"></label></td>
        </tr>
        <tr>
            <td><label>Activities: </label></td>
            <td>
                <select id="applicantActivity" name="applicantActivity"
                        data-validation="select" data-validationmessage="Activity must be chosen"
                        data-required="true" data-default="null">
                    <option value="null">Pick Activity</option>
                </select>
            </td>
            <td><label id="applicantActivityError"></label></td>
        </tr>
        <tr>
            <td><label>Role: </label></td>
            <td>
                <select id="applicantRole" name="applicantRole"
                        data-validation="select" data-validationmessage="Role must be chosen"
                        data-required="true" data-default="null">
                    <option value="null">Pick Role</option>
                </select>
            </td>
            <td><label id="applicantRoleError"></label></td>
        </tr>
        <tr>
            <td><label>Positions Vacant: </label></td>
            <td><input id="aPositions" type="text" name="positions" placeholder="Positions Vacant"
                       class="inputLabel" readonly="readonly" onchange="inputChange(event)"/></td>
            <td><label id="aPositionsError"></label></td>
        </tr>
        <tr>
            <td><label>Pay Rate: </label></td>
            <td><input id="aPay" type="text" name="payRate" placeholder="Pay Rate"
                       class="inputLabel" readonly="readonly" onchange="toDollarFormat(event)"/></td>
            <td><label id="aPayError"></label></td>
        </tr>
        <tr>
            <td><label>Filter Applicants: </label></td>
            <td><input id="filterApplicants" type="text" name="filterApplicants" placeholder="Filter by skills"
                       data-validation="text" data-required="false"/></td>
            <td><label id="filterApplicantsError"></label></td>
        </tr>
        <tr>
            <td><label>Applicants: </label></td>
            <td>
                <select id="applicantSelect" name="person"
                        data-validation="select" data-validationmessage="Applicant must be chosen"
                        data-required="true" data-default="null">
                    <option value="null">Pick Applicant</option>
                </select>
            </td>
            <td><label id="applicantSelectError"></label></td>
        </tr>
        <tr>
            <td><label>Name: </label></td>
            <td><input id="aName" type="text" name="fullName" placeholder="Name" onchange="inputChange(event)"
                       data-maxlength="35" class="inputLabel" readonly="readonly"/></td>
            <td><label id="aNameError"></label></td>
        </tr>
        <tr>
            <td><label>Account Type: </label></td>
            <td><input id="aAccountType" type="text" name="accountType" class="inputLabel"
                       readonly="readonly" placeholder="Account Type" onchange="accountTypeChange(event)"/></td>
            <td><label id="aAccountTypeError"></label></td>
        </tr>
        <tr>
            <td><label>Email: </label></td>
            <td><input id="aEmail" type="text" name="email" placeholder="Email" onchange="inputChange(event)"
                       class="inputLabel" readonly="readonly" style="text-transform: none"/></td>
            <td><label id="aEmailError"></label></td>
        </tr>
        <tr>
            <td><label>Availability: </label></td>
            <td><input id="aAvailability" type="text" name="avaliability" placeholder="Availability"
                       class="inputLabel" readonly="readonly" onchange="inputChange(event)"/></td>
            <td><label id="aAvailabilityError"></label></td>
        </tr>
        <tr>
            <td><label>Skills: </label></td>
            <td><input id="aSkills" name="skills" type="text" class="inputLabel"
                       readonly="readonly" placeholder="Skills" onchange="inputChange(event)"/></td>
            <td><label id="aSkillsError"></label></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" id="accountButton" class="submitBtn" onclick="viewPerson()" value="View Detailed Information"/></td>
            <td></td>
        </tr>
        <tr>
            <td><label>Attended: </label></td>
            <td>
                <select id="attended" name="attended" data-default="false">
                    <option value="true">Yes</option>
                    <option value="false" selected="selected">No</option>
                </select>
            </td>
            <td><label id="attendedError"></label></td>
        </tr>
        <tr>
            <td><label>Hours Worked: </label></td>
            <td><input id="aHours" type="text"  data-validation="decimal" data-dp="2" 
                       name="hours" placeholder="Hours Works" data-validationmessage="Must be 2 decimal places"/></td>
            <td><label id="aHoursError"></label></td>
        </tr>
        <tr>
            <td><label>Application Status: </label></td>
            <td>
                <select id="assignToRole" name="accepted" data-default="pending">
                    <option value="pending" selected="selected">Pending</option>
                    <option value="accepted">Accept</option>
                    <option value="rejected">Reject</option>
                </select>
            </td>
            <td><label id="assignToRoleError"></label></td>
        </tr>
        <tr>
            <td></td>
            <td><input class="submitBtn" type="submit" value="Update Applicate" id="applicantSubmit"/></td>
            <td></td>
        </tr>
    </table>
</form>
<style>
    iframe {
        left: 10%;
        position: absolute;
        z-index: 20;
        top: 10px;
        width: 80%;
        margin: 0 !important;
        padding: 0;
        background-color: white;
        box-shadow: 5px 5px 5px black;
    }
    .body {
        margin: 0 !important;
        padding: 0 !important;
    }
</style>
<iframe id="frame" src="WEB-INF/profile.php?person=0" class="hidden" scrolling="no" frameborder="0"></iframe>
<div id="glass" class="cover"></div>
<script>
    //This module sets up and populates the applicants form
    var applicantForm = (function() {
        var form = UTSDK.$("applicantForm");
        var applicantEvent = UTSDK.$("applicantEvent");
        var applicantActivity = UTSDK.$("applicantActivity");
        var applicantRole = UTSDK.$("applicantRole");
        var applicantSelect = UTSDK.$("applicantSelect");
        var filter = UTSDK.$("filterApplicants");
        var accountBtn = UTSDK.$("accountButton");
        UTSDK.disable(accountBtn);
        var oldValue;
        //load events to event input
        window.addEventListener("load", function() {
            var json = {"event": "all"};
            UTSDK.updateSelect(json, applicantEvent);
        });
        //Update activity on select change
        applicantEvent.addEventListener("change", function() {
            var json = {"activityEvent": applicantEvent.options[applicantEvent.selectedIndex].value};
            UTSDK.updateSelect(json, applicantActivity);
            selectChange([applicantActivity, applicantRole, applicantSelect]);
        });
        //Update role on select activity
        applicantActivity.addEventListener("change", function() {
            var json = {"roleActivity": applicantActivity.options[applicantActivity.selectedIndex].value};
            UTSDK.updateSelect(json, applicantRole);
            selectChange([applicantRole, applicantSelect]);
        });
        //Update applicants on select role
        applicantRole.addEventListener("change", function() {
            if (filter.value === "") {
                var json = {"personRole": applicantRole.options[applicantRole.selectedIndex].value};
                UTSDK.updateSelect(json, applicantSelect);
                selectChange([applicantSelect]);
            }
            else {
                UTSDK.dispatchEvent(filter, "keyup");
            }
            var positions = {positions: applicantRole.value};
            if (applicantRole.value === "null") {
                UTSDK.$("aPositions").value = "";
                UTSDK.$("aPay").value = "";
            }
            else {
                UTSDK.AJAX.get("update.php", positions, function(responce) {
                    responce = JSON.parse(responce);
                    var pay = UTSDK.$("aPay");
                    UTSDK.$("aPositions").value = responce["positions"];
                    pay.value = responce["payRate"];
                    UTSDK.dispatchEvent(pay, "change");
                });
            }
        });
        //Update appliants on filter change
        filter.addEventListener("keyup", function(evt) {
            if (applicantRole.value !== "null") {
                if (evt.keyCode && oldValue === filter.value) // Stops unneccessary requests
                    return;
                else if (filter.value === "" && evt.keyCode != UTSDK.CONSTANTS.systemKeys["Backspace"])
                    return;
                else
                    oldValue = filter.value;
                var json = {
                    filter: filter.value,
                    role: applicantRole.value
                };
                if (filter.value === "") {
                    json = {
                        personRole: applicantRole.value
                    };
                }
                UTSDK.updateSelect(json, applicantSelect, "update.php", function() {
                    UTSDK.dispatchEvent(applicantSelect, "change");
                });
            }
        });
        //Update applicant fields
        applicantSelect.addEventListener("change", function() {
            if (applicantSelect.value == null) {
                UTSDK.disable(accountBtn);
            }
            else {
                UTSDK.enable(accountBtn);
            }
            var json = {};
            json["formSource"] = "cApplicant";
            json["person"] = applicantSelect.value;
            json["personRole"] = applicantRole.value;
            json["id"] = form.id;
            UTSDK.updateForm(json, "update.php");
            var json = {};
            json["appliedRole"] = applicantRole.value;
            json["appliedPerson"] = applicantSelect.value;
            json["id"] = form.id;
            UTSDK.updateForm(json, "update.php");
        });
        //Update elements specified in array to null
        function selectChange(array) {
            for (var i = 0; i < array.length; i++) {
                if (array[i].value !== "null") {
                    array[i].value = "null";
                    UTSDK.dispatchEvent(array[i], "change");
                }
            }
        }
        return {
            getForm: function() {
                return form;
            },
            getApplicantSelect: function() {
                return applicantSelect;
            },
        };
    })();
    //Translate true false value to yes no
    function booleanToYesNo(evt) {
        if (UTSDK.equalsIgnoreCase(evt.target.value, "false"))
            evt.target.value = "No";
        else if (UTSDK.equalsIgnoreCase(evt.target.value, "true"))
            evt.target.value = "Yes";
        else {
            if (applicantForm.getApplicantSelect().value === "null")
                evt.target.value = "";
            else
                evt.target.value = "Not Disclosed";
        }
    }
    //Translates account type value into human friendly text
    function accountTypeChange(evt) {
        if (UTSDK.equalsIgnoreCase(evt.target.value, "eventmanager")) {
            evt.target.value = "Event Manager";
        }
        else if (UTSDK.equalsIgnoreCase(evt.target.value, "sprout")) {
            evt.target.value = "SPROUT";
        }
    }
    //Translates gender enum to gender word
    function genderChange(evt) {
        if (UTSDK.equalsIgnoreCase(evt.target.value, "M"))
            evt.target.value = "Male";
        else if (UTSDK.equalsIgnoreCase(evt.target.value, "F"))
            evt.target.value = "Female";
        else {
            if (applicantForm.getApplicantSelect().value === "null")
                evt.target.value = "";
            else
                evt.target.value = "Other";
        }
    }
    //When input changes set it to value or not disclosed
    function inputChange(evt) {
        if (evt.target.value === "") {
            if (applicantForm.getApplicantSelect().value === "null")
                evt.target.value = "";
            else
                evt.target.value = "Not Disclosed"
        }
    }
    //Change hidden action input so that php knows whether to add or remove applicant
    function assignChange(evt) {
        if (evt.target.value === "true")
            applicantForm.getForm().elements["action"].value = "add";
        else
            applicantForm.getForm().elements["action"].value = "remove";
    }
    //Converts input to dollar format
    function toDollarFormat(evt) {
        var dollar = UTSDK.toDollarFormat(evt.target.value);
        evt.target.value = dollar;
    }
    function viewPerson() {
        var iframe = UTSDK.$("frame");
        var glass = UTSDK.$("glass");
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        iframe.src = "WEB-INF/profile.php?person=" + applicantForm.getApplicantSelect().value;
        iframe.parentElement.style.position = "relative";
        UTSDK.addClass(doc.body, "body");
        UTSDK.fadeIn(iframe, 1);
        UTSDK.fadeIn(glass, 1);
        iframe.style.height = doc.getElementById("profileTable").getBoundingClientRect().height + "px";
        glass.addEventListener("click", closeiframe);
        iframe.addEventListener("click", stopPropagation);
    }

    function stopPropagation(evt) {
        evt.stopPropagation();
    }

    function closeiframe() {
        var frame = UTSDK.$("frame");
        var glass = UTSDK.$("glass");
        UTSDK.fadeOut(frame, 1);
        UTSDK.fadeOut(glass, 1);
        glass.removeEventListener("click", closeiframe);
        frame.removeEventListener("click", stopPropagation);
    }
</script>
